/**
 * Created by zsgjs on 2017/2/9.
 */
/*
 *  轮播器组件
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
} from 'react-native';

import model from '../classes/Model';
const pointW = 10;
const count = 4;

const TimerMixin = require('react-timer-mixin');
const MHScrollView = React.createClass({

    mixins: [TimerMixin],

    getInitialState(){
        return{
            currentPage:0
        }
    },

    render(){
        return(
            <View style={scrollStyle.ScrollContainer}>
                <ScrollView
                    ref='SCROLLVIEW_REF'
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    bounces={false}
                    onScrollBeginDrag={this.onStartDrag}
                    onScrollEndDrag = {this.onScrollEndDrag}
                    onMomentumScrollEnd={this.onMomentumScrollEnd}
                >
                    {this.renderScrollSubViews()}
                </ScrollView>
                <View style={scrollStyle.indicatorContainer}>
                    {this.renderIndicatorsPoint()}
                </View>

            </View>
        )
    },

    /*
     *   渲染组件
     */
    renderScrollSubViews(){
        var allViews = [];
        var viewCommonStyle = {height: 200, width: model.screen_w};

        for (var i = 0; i < count; i++) {
            var color = i % 2 ? 'orange' : 'green';
            allViews.push(
                <View key={i} style={[viewCommonStyle, {backgroundColor:color}]}></View>
            )
        }
        return allViews;
    },

    renderIndicatorsPoint() {
        var allPoints = [];
        for (var i = 0; i < count; i++) {
            var indicatorColor = this.state.currentPage == i ? 'white' : 'black';
            allPoints.push(
                <View key={i} style={[scrollStyle.pointCommonStyle, {backgroundColor: indicatorColor}]}>
                </View>
            )
        }
        return allPoints;
    },

    /*
     *   回调事件
     */
    onStartDrag() {

    },

    onScrollEndDrag() {


    },

    onMomentumScrollEnd(e) {
        var offset_x = e.nativeEvent.contentOffset.x;
        var activeIndex = Math.floor(offset_x /model.screen_w);
        if (activeIndex >= count - 1) activeIndex = count - 1;
        else if (activeIndex <= 0) activeIndex = 0;
        this.setState({
            currentPage: activeIndex
        });
    }
});

const scrollStyle = StyleSheet.create({
    ScrollContainer: {
        height:200,
        width: model.screen_w,
        alignItems:'center'
    },

    indicatorContainer: {
        position: "absolute",
        bottom: 0,
        height: 20,
        width:pointW * 8,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        marginLeft: (model.screen_w - 80) * 0.5
    },

    pointCommonStyle:{
        height: 3,
        width: pointW,
        borderRadius: 1.5
    }
});

module.exports = MHScrollView;